<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<%
  pageContext.setAttribute("APP_PATH", request.getContextPath());
%>
<script type="text/javascript" src="${APP_PATH}/static/js/jquery-1.12.4.min.js"></script>
<link href="${APP_PATH}/static/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="${APP_PATH}/static/bootstrap-3.3.7-dist/js/bootstrap.min.js" ></script>
<script type="text/javascript">
$(document).ready(function(){
	//alert(1);
});
</script>

</head>
</head>
<body>
<!-- 添加员工Modal -->
<div class="modal fade" id="empAddModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">添加员工</h4>
      </div>
      <div class="modal-body">
			<form class="form-horizontal">
			  <div class="form-group">
			    <label for="empName_add_input" class="col-sm-2 control-label">empName</label>
			    <div class="col-sm-10">
			      <input type="text" name="empName" class="form-control" id="empName_add_input" placeholder="empName">
			    </div>
			  </div>
			  <div class="form-group">
			    <label class="col-sm-2 control-label">email</label>
			    <div class="col-sm-10">
			      <input type="text" name="email" class="form-control" id="email_add_input" placeholder="email@qq.com">
			    </div>
			  </div>
			  <div class="form-group">
			    <label class="col-sm-2 control-label">gender</label>
			    <div class="col-sm-10">
			      <label class="radio-inline">
					  <input type="radio" name="gender" id="gender1_add_input" value="M" checked="checked"> 男
					</label>
					<label class="radio-inline">
					  <input type="radio" name="gender" id="gender2_add_input" value="F"> 女
					</label>
			    </div>
			  </div>
			  <div class="form-group">
			    <label class="col-sm-2 control-label">deptName</label>
			    <div class="col-sm-4">
			    <!-- 部门提交部门id即可 -->
			     <select class="form-control" name="dId" id="dept_add_select">
				</select>
			    </div>
			  </div>
			</form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary" id="emp_save_btn">Save</button>
      </div>
    </div>
  </div>
</div>
<!-- 显示页面  使用 bootstrap -->
    <div class="container">
        <!-- 标题 -->
      <div class="row">
        <div class="col-md-12"><h1>EMPLOYEE</h1></div>
      </div>
      <!--按钮 --> 
      <div class="row">
        <div class="col-md-4 col-md-offset-8">
          <button class="btn btn-primary" id="emp_add_model_btn">新增</button>
          <button class="btn btn-danger">删除</button>
        </div>
      </div>
   
       <!-- 显示表格数据-->
      <div class="row">
        <div class="col-md-12">
          <table class="table table-hover" id="emps_table">
          <thead>
            <tr>
              <th>#</th>
              <th>empName</th>
              <th>gender</th>
              <th>email</th>
              <th>deptName</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
             
          </tbody>
          </table>
        </div>
      </div>
      <!-- 显示分页信息 -->
      <div class="row">
      <!-- 分页文字信息 -->
        <div class="col-md-6" id="page_info_area">
                   
        </div>
      <!-- 分页条信息 -->
        <div class="col-md-6" id="page_nav_area">
        
        </div>
		   
      </div>
      </div>
      
      
      
      
 <script type="text/javascript">
 //页面加载完毕后，发送ajax请求，拿到分页数据
 $(function(){
	  $.ajax({
		  url:"${APP_PATH}/emps",
		  data:"pn=1",
		  type:"GET",
		  success:function(result){
			//1. 解析并显示员工数据
			//console.log(result);
			build_emps_table(result);
			//2.
			build_page_info(result);
			//3. 解析并显示分页数据
			build_page_nav(result)
		  }
	  });
 });
  
  function to_page(pn){
	   $.ajax({
		  url:"${APP_PATH}/emps",
		  data:"pn="+pn,
		  type:"GET",
		  success:function(result){
			//1. 解析并显示员工数据
			//console.log(result);
			build_emps_table(result);
			//2.
			build_page_info(result);
			//3. 解析并显示分页数据
			build_page_nav(result)
		  }
	  });
  }
  

  function build_emps_table(result){
	   //清空表格
	   $("#emps_table tbody").empty();
	   var emps=result.extend.pageInfo.list;
	   $.each(emps,function(index,item){
		   //alert(item.empName);
		   var empIdTd=$("<td></td>").append(item.empId);
		   var empNameTd=$("<td></td>").append(item.empName);
		   var genderTd=$("<td></td>").append(item.gender=='M'?"男":"女");
		   var emailTd=$("<td></td>").append(item.email);
		   var deptNameTd=$("<td></td>").append(item.department.deptName);
		   var editBtn=$("<button></button>").addClass("btn btn-primary btn-sm")
		       .append($("<span></span>").addClass("glyphicon glyphicon-pencil"))
		       .append("编辑");
		   var delBtn=$("<button></button>").addClass("btn btn-danger btn-sm")
	       .append($("<span></span>").addClass("glyphicon glyphicon-trash"))
	       .append("删除");
		   
		   var btnTd=$("<td></td>").append(editBtn).append(delBtn);
		   $("<tr></tr>").append(empIdTd)
		   .append(empNameTd)
		   .append(genderTd)
		   .append(emailTd)
		   .append(deptNameTd)
		   .append(btnTd)
		   .appendTo("#emps_table tbody");
	   });
  }
  //解析显示分页信息
  function build_page_info(result){
	   $("#page_info_area").empty();
	   $("#page_info_area")
	   .append("当前第"+result.extend.pageInfo.pageNum+
			   "页,总共"+result.extend.pageInfo.pages+"页,总共"
			   +result.extend.pageInfo.total+"条记录");
  }
  
  //解析显示分页条
  function build_page_nav(result){
	   $("#page_nav_area").empty();
	   var ul=$("<ul></ul>").addClass("pagination");
	   
	   var firstPageLi=$("<li></li>").append($("<a></a>").append("首页").attr("href","#"));
	   var prePageLi=$("<li></li>").append($("<a></a>").append("&laquo;").attr("href","#"));
	   if(result.extend.pageInfo.hasPreviousPage==false){
		   firstPageLi.addClass("disabled");
		   prePageLi.addClass("disabled");
	   }else{    		   
	   prePageLi.click(function(){
		   to_page(result.extend.pageInfo.pageNum-1);
	   });
	   firstPageLi.click(function(){
		   to_page(1);
	   });
	   }
	   var nextPageLi=$("<li></li>").append($("<a></a>").append("&raquo;").attr("href","#"));
	   
	   var lastPageLi=$("<li></li>").append($("<a></a>").append("末页").attr("href","#"));
	   if(result.extend.pageInfo.hasNextPage==false){
		   nextPageLi.addClass("disabled");
		   lastPageLi.addClass("disabled");
	   }else{    		   
	   nextPageLi.click(function(){
		   to_page(result.extend.pageInfo.pageNum+1);
	   });
	   lastPageLi.click(function(){
		   to_page(result.extend.pageInfo.pages);
	   });
	   }
	   
	   ul.append(firstPageLi).append(prePageLi);
	   //result.extend.pageInfo.navigatepageNums 为什么是这样子，看返回的json数据类型就可以了
	   $.each(result.extend.pageInfo.navigatepageNums,function(index,item){
		   var numLi=$("<li></li>").append($("<a></a>").append(item).attr("href","#"));
		   if(result.extend.pageInfo.pageNum==item){
			   numLi.addClass("active");
		   }
		   numLi.click(function(){
			   to_page(item);
		   });
		   ul.append(numLi);
	   });
	   ul.append(nextPageLi).append(lastPageLi);
	   //把ul添加到nav
	   var navEle=$("<nav></nav>").append(ul);
	   navEle.appendTo("#page_nav_area");
  }
//点击新增，弹出模态框
  $("#emp_add_model_btn").click(function(){
	   //发送ajax请求，查出部门信息，显示在下拉列表中
	   getDepts();
	   //弹出模态框
	   $("#empAddModal").modal({
		   backdrop:"static"
	   });
  });
  
  //查出所有的部门信息，并显示在下拉列表
  function getDepts(){
	   $.ajax({
		   url:"${APP_PATH}/depts",
		   type:"GET",
		   success:function(result){
			   //console.log(result);
			   //显示部门信息到下拉列表
			  //$("#dept_add_select")
			  $.each(result.extend.depts,function(){
				  var optionEle=$("<option></option>").append(this.deptName).attr("value",this.deptId);
				  optionEle.appendTo($("#dept_add_select"));
			  }); 		  
		   }
	   });
  }

  
$("#emp_save_btn").click(function(){
	 //1.模态框中填写的表单数据提交给服务器进行保存
	// alert($("#empAddModal form").serialize());
	 //2. 发送ajax请求
	  $.ajax({
		 url:"${APP_PATH}/emp",
		 type:"POST",
		 data:$("#empAddModal form").serialize(),
		 success:function (result){
			 alert(result.msg);
			 $("#empAddModal").modal('hide');
		 }
	 }); 
});  

      </script>
</body>
</html>